<template>
  <el-dropdown trigger="click" @command="handleSetLanguage">
    <i class="icon-zhongyingwen"></i>
    <template v-slot:dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language==='zh-cn'" command="zh-cn">中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='en'" command="en">English
        </el-dropdown-item>
        <el-dropdown-item :disabled="language==='ja'" command="ja">日文
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import {useCommonStore} from "@/store/modules/common.js";
import {useNavsStore} from "@/store/modules/tags.js";
import {computed,} from "vue"
import {useRoute, useRouter} from "vue-router"
import {useI18n} from "vue-i18n"
defineOptions({
  name: "top-lang",
})

const language = computed(() => {
  const commonStore = useCommonStore();
  return commonStore.language
})
const tag = computed(() => {
  const navsStore = useNavsStore();
  return navsStore.tag
})

const route = useRoute();
const router = useRouter()
const {t, locale} = useI18n()

function handleSetLanguage(lang) {
  locale.value = lang;
  const commonStore = useCommonStore();
  commonStore.SET_LANGUAGE(lang)
  let title = router.$avueRouter.generateTitle(tag.value);
  //根据当前的标签也获取label的值动态设置浏览器标题
  router.$avueRouter.setTitle(title);
}
</script>
<style lang="scss" scoped>
</style>
